<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件化2</title>
</head>
<body>

<div id="app">
    <!-- 驼峰规则 -->
    <a-a-a-a-a></a-a-a-a-a>
    <a-a-a-a-a></a-a-a-a-a>
    <a-a-a-a-a></a-a-a-a-a>
    <a-a-a-a-a></a-a-a-a-a>

</div>

<!-- 模板 -->
<template id="addNumTem">
    <div>
        <h3>静夜思</h3>
        床前明月光，疑似地上霜。
        举头望明月，低头思故乡
        <div>

            引入属性:{{msg}}
            {{msg2}}
            {{msg3}}
            {{num}}
            <button @click="addNum">++</button>
        </div>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    Vue.component(`AAAAA`, {
        data() {
            return {
                num: 0,
                msg: `????????????????????????`,
                msg2: `!!!!!!!!`,
                msg3: `hahahahah1`,
            }
        },
        template: `#addNumTem`,
        methods: {
            addNum() {
                this.num++
            }
        }
    })
    // 必须要写Vue对象 在Vue对象对应html元素里面才能使用组件
    const APP = new Vue({
        el: `#app`
    })
</script>
</body>
</html>
